<template>
  <div class="detail">
    <div class="vid" v-for="v in list" :key="v.id">
      <video :src="v.url" autoplay controls></video>
    </div>
    <div class="msg" v-if="product">
      <img :src="product.data.avatarUrl" alt="" />
      <h3>{{ product.data.creator.nickname }}</h3>
      <p>+&nbsp;&nbsp;关注</p>
    </div>
    <div class="description" v-if="product">
      <p>
        {{ product.data.title }}
      </p>
    </div>
    <hr />
    <div class="message" v-if="com">
      评论(<span>{{ com.data.totalCount }}</span
      >)
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="50"
    >
      <ul>
        <li v-for="item in coms" :key="item.commentId">
          <img :src="item.user.avatarUrl" alt="" />
          <div class="comt">
            <p>
              {{ item.user.nickname }}
            </p>
            <span>{{ item.time | capitalize }}</span>
            <h4>{{ item.content }}</h4>
          </div>
          <!-- <h5>时间</h5> -->
          <div>
            <van-icon
              name="good-job-o"
              @click="addContent(item.commentId, item.likedCount)"
              :badge="item.likedCount"
            />
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
import { videoDetail, reqVideo, likeClick } from '../../api/Ksing'
export default {
  filters: {
    capitalize: function(value) {
      var data = new Date(value)
      var year = data.getFullYear()
      var month = data.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      var day = data.getDate()
      if (day < 10) {
        day = '0' + day
      }
      var hour = data.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      var m = data.getMinutes()
      if (m < 10) {
        m = '0' + m
      }
      return `${year}-${month}-${day} ${hour}:${m}`
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      finished: false,
      id: '',
      list: [],
      product: null,
      coms: [],
      com: '',
      pageNo: 1,
    }
  },
  computed: {},
  watch: {},

  methods: {
    // 点赞功能
    async addContent(cid, a) {
      console.log(cid)
      this.id = this.$route.params.id
      console.log(this.id)
      const result = await likeClick({ id: this.id, cid, type: 5, t: 1 })
      console.log(result)
      if (result.data.code == 200) {
        console.log(a)
      }
    },
    // 视频详情
    async getDetail(id) {
      const result = await videoDetail(id)
      console.log(result)
      this.list = result.data.urls
      console.log(this.list)
    },
    async getVideo(id) {
      const result = await reqVideo(id)
      console.log(result.data)
      this.product = result.data
    },
    // 获取评论  懒加载
    getComment(id) {
      this.loading = true
      axios
        .get('http://localhost:3000/comment/new', {
          params: {
            type: 5,
            id,
            pageNo: this.pageNo,
            pageSize: 8,
            sortType: 2,
          },
        })
        .then((res) => {
          console.log(res.data)
          this.loading = false
          this.com = res.data
          this.coms = [...this.coms, ...res.data.data.comments]
          if (res.data.data.comments < 8) {
            this.finished = true
          } else {
            this.pageNo++
          }
        })
    },
    onLoad() {
      this.id = this.$route.params.id
      this.getComment(this.id)
    },
  },
  created() {
    this.id = this.$route.params.id
    this.getDetail(this.id)
    this.getVideo(this.id)
    this.getComment(this.id)
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
}
</script>
<style scoped>
video {
  width: 100%;
  height: 4.05rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  object-fit: cover;
}
.msg {
  margin-top: 4.3rem;
  width: 100%;
  height: 1.3rem;
  /* border: yellow 1px solid; */
  display: flex;
}
.msg img {
  margin-top: 0.1rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  margin-left: 0.4rem;
}
.msg h3 {
  font-size: 0.4rem;
  line-height: 1.3rem;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  font-family: '楷体';
}
.msg p {
  text-align: center;
  width: 1.5rem;
  line-height: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.25rem;
  height: 0.5rem;
  color: #fff;
  background: tomato;
  border-radius: 30px 30px 30px 30px;
}
.description p {
  font-size: 0.32rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  line-height: 0.45rem;
  margin-top: 0.3rem;
  color: rgb(71, 64, 64);
  font-family: '楷体';
}
hr {
  margin-top: 0.4rem;
}
.message {
  font-size: 0.5rem;
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  font-family: '新宋体';
}
ul li {
  display: flex;
  position: relative;
  margin-top: 0.6rem;
  /* height: 2rem; */
  /* border: 1px solid springgreen; */
}
ul li img {
  width: 0.8rem;
  height: 0.8rem;
  /* border: hotpink 1px solid; */
  border-radius: 50%;
  margin-left: 0.35rem;
}
.comt {
  margin-left: 0.2rem;
}
.comt p {
  font-size: 0.3rem;
  color: rgb(87, 85, 85);
  margin-top: 0.01rem;
  font-family: '黑体';
}
.comt h4 {
  margin-top: 0.4rem;
  font-size: 0.35rem;
  color: rgb(85, 85, 85);
  line-height: 0.45rem;
  margin-right: 0.8rem;
  font-family: '楷体';
  font-weight: 600;
}
ul li span {
  position: absolute;
  font-size: 0.1rem;
  /* margin-left: 5rem; */
  color: rgb(185, 184, 184);
  margin-top: 0.1rem;
}
ul li .van-icon {
  font-size: 0.5rem;
  position: absolute;
  right: 0.4rem;
}
</style>
